<script lang="ts" setup>
import {ref, inject, Ref, onUnmounted, onMounted} from 'vue';
import { IBanner, ICollapse, ITabs } from '@/interface/IHome.ts';
import type { TabsPaneContext, CollapseModelValue } from "element-plus"

// banner
const bannerList = ref<IBanner[]>();
const getBanners = async() => {
  bannerList.value = [
    { image : '/img/banner-1.jpg' },
    { image : '/img/banner-2.jpg' },
    { image : '/img/banner-3.png' },
    { image : '/img/banner-4.png' },
  ];
};

// card
const cardLists = ref( [] );
const getCards = () => {
  cardLists.value = [
    {
      title : '代理IP资源',
      description : '稳定高 Pure 代理IP资源，稳定连接，快速响应'
    },
    {
      title : '代理IP资源',
      description : '稳定高 Pure 代理IP资源，稳定连接，快速响应'
    },
    {
      title : '代理IP资源',
      description : '稳定高 Pure 代理IP资源，稳定连接，快速响应'
    },
    {
      title : '代理IP资源',
      description : '稳定高 Pure 代理IP资源，稳定连接，快速响应'
    },
  ];
};

// product
const productLists = ref( [] );
const getProducts = () => {
  productLists.value = [
    {
      title : '不限量代理',
      description : '自运营的高品质Socks/HTTP代理服务器；主要以短效动态代理IP为主，线路以高连通率、高带宽、高并发、稳定的优势，适用于个人/企业对IP代理数量要求较大，对代理IP品质要求高的用户',
      list : [
        {
          title : '200W+',
          text : '每天可用IP',
          description : '同时支持HTTP/HTTPS/Socks协议',
        },
        {
          title : '200+',
          text : '1次可提取IP',
          description : '可用时长从1分钟到3小时全覆盖',
        },
        {
          title : '99%',
          text : '1次可提取IP',
          description : '可用时长从1分钟到3小时全覆盖',
        },
        {
          title : '10ms',
          text : '极速响应时间',
          description : '电信和联通机房极速访问',
        },
      ],
    },
    {
      title : '包时代理',
      description : '自运营的高品质Socks/HTTP代理服务器；主要以短效动态代理IP为主，线路以高连通率、高带宽、高并发、稳定的优势，适用于个人/企业对IP代理数量要求较大，对代理IP品质要求高的用户',
      list : [
        {
          title : '200W+',
          text : '每天可用IP',
          description : '同时支持HTTP/HTTPS/Socks协议',
        },
        {
          title : '200+',
          text : '1次可提取IP',
          description : '可用时长从1分钟到3小时全覆盖',
        },
        {
          title : '99%',
          text : '1次可提取IP',
          description : '可用时长从1分钟到3小时全覆盖',
        },
        {
          title : '10ms',
          text : '极速响应时间',
          description : '电信和联通机房极速访问',
        },
      ],
    },
    {
      title : '包量代理',
      description : '自运营的高品质Socks/HTTP代理服务器；主要以短效动态代理IP为主，线路以高连通率、高带宽、高并发、稳定的优势，适用于个人/企业对IP代理数量要求较大，对代理IP品质要求高的用户',
      list : [
        {
          title : '200W+',
          text : '每天可用IP',
          description : '同时支持HTTP/HTTPS/Socks协议',
        },
        {
          title : '200+',
          text : '1次可提取IP',
          description : '可用时长从1分钟到3小时全覆盖',
        },
        {
          title : '99%',
          text : '1次可提取IP',
          description : '可用时长从1分钟到3小时全覆盖',
        },
        {
          title : '10ms',
          text : '极速响应时间',
          description : '电信和联通机房极速访问',
        },
      ],
    },
    {
      title : '隧道代理',
      description : '自运营的高品质Socks/HTTP代理服务器；主要以短效动态代理IP为主，线路以高连通率、高带宽、高并发、稳定的优势，适用于个人/企业对IP代理数量要求较大，对代理IP品质要求高的用户',
      list : [
        {
          title : '200W+',
          text : '每天可用IP',
          description : '同时支持HTTP/HTTPS/Socks协议',
        },
        {
          title : '200+',
          text : '1次可提取IP',
          description : '可用时长从1分钟到3小时全覆盖',
        },
        {
          title : '99%',
          text : '1次可提取IP',
          description : '可用时长从1分钟到3小时全覆盖',
        },
        {
          title : '10ms',
          text : '极速响应时间',
          description : '电信和联通机房极速访问',
        },
      ],
    },
  ];
}

// tabs
const tabsList = ref<ITabs[]>();
const getTabsList = () => {
  tabsList.value = [
    {
      label : '最新公告',
      name : 'first',
      list : [
        {
          title : '公告1',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '公告2',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '公告3',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '公告4',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '公告5',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '公告6',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '公告7',
          path : '/',
          create_time : '2023-07-01'
        },
      ],
    },
    {
      label : '行业新闻',
      name : 'second',
      list : [
        {
          title : '新闻1',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '新闻2',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '新闻3',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '新闻4',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '新闻5',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '新闻6',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '新闻7',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '新闻8',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '新闻9',
          path : '/',
          create_time : '2023-07-01'
        },
      ]
    },
    {
      label : '产品资讯',
      name : 'third',
      list : [
        {
          title : '资讯1',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '资讯2',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '资讯3',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '资讯4',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '资讯5',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '资讯6',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '资讯7',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '资讯8',
          path : '/',
          create_time : '2023-07-01'
        },
        {
          title : '资讯9',
          path : '/',
          create_time : '2023-07-01'
        },
      ]
    },
  ];
}
const activeName = ref( 'second' );
const handleClick = ( tab : TabsPaneContext, event : Event ) => {
  console.log( tab.paneName );
};

//全局注入
const state = inject( 'state' ) as Ref<number>;

// 折叠板
const activeNameCollapse = ref(1);// 折叠板激活项
/**
 * 打开或者关闭折叠板的激活项 如果val的值不等于空字符串，则是打开折叠板的信息
 * @param val
 */
const handleChange = ( val : CollapseModelValue) => {
  console.log( val );
};
let collapseList = ref<ICollapse[]>();
const getCollapseList = () => {
  collapseList.value = [
    {
      title : '折叠板1',
      name : '1',
      description : '折叠板1内容'
    },
    {
      title : '折叠板2',
      name : '2',
      description : '折叠板2内容'
    },
    {
      title : '折叠板3',
      name : '3',
      description : '折叠板3内容'
    },
    {
      title : '折叠板4',
      name : '4',
      description : '折叠板4内容'
    },
  ];
}

// 监听窗口大小
const windowWidth = ref( window.innerWidth );
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};
onUnmounted( () => {
  window.removeEventListener( 'resize', handleResize );
} );
onMounted( () => {
  window.addEventListener( 'resize', handleResize );
  console.log( 'onMounted', state );
  getBanners();
  getCards();
  getProducts();
  getTabsList();
  getCollapseList();
} );
</script>

<template>
  <!-- 广告图 -->
  <div class="text-center" :class="{}">
    <el-carousel height="300px">
      <el-carousel-item
          v-for="(item, index) in bannerList"
          :key="index"
          :style="{
            background: `url(${item.image}) no-repeat center center`,
            backgroundSize: 'cover',
          }"
      >
      </el-carousel-item>
    </el-carousel>
  </div>

  <!-- 卡片 -->
  <div class="margin-top-10">
    <el-space :direction="windowWidth >= 768 ? 'horizontal' : 'vertical'">
      <template v-for="item in cardLists">
        <el-card class="box-card">
          <div>{{ item.title }}</div>
          <div>{{ item.description }}</div>
        </el-card>
      </template>
    </el-space>
  </div>

  <!-- 套餐卡片 -->
  <div :class="{'margin-top-10': windowWidth >= 768, 'margin-10': windowWidth < 768}" class="bg-white padding-right-10 padding-top-10 border-default-1 border-radius-4">
    <el-tabs tab-position="left" style="height: 300px;" :stretch="true">
      <template v-for="item in productLists">
        <el-tab-pane :label="item.title">
          <div class="padding-left-10 line-height-40 flex-row flex justify-between">
            <div><span class="font-size-20">{{ item.title }}</span></div>
            <div><el-button type="primary" plain>立即购买</el-button></div>
          </div>
          
          <el-row>
            <el-col class="padding-10">
              <div class="line-height-30">{{ item.description }}</div>
            </el-col>
            <el-col :class="{'hidden-md-and-down' : windowWidth < 768}">
              <el-divider class="margin-top-10 margin-bottom-10"></el-divider>
              <el-row>
                <template v-for="val in item.list">
                  <el-col :span="6" class="border-right-2">
                    <div class="text-color-primary font-size-36 text-center ">{{ val.title }}</div>
                    <div class="font-size-16 text-color line-height-40 text-center font-600">{{ val.text }}</div>
                    <div class="text-center text-ellipsis">{{ val.description }}</div>
                  </el-col>
                </template>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>


  <!-- 折叠板 -->
  <div :class="{'margin-top-10': windowWidth >= 768, 'margin-10': windowWidth < 768,}" class="bg-white padding-10-20 border-default-1 border-radius-4">
    <el-collapse v-model="activeNameCollapse" @change="handleChange" accordion>
      <template v-for="(item, index) in collapseList" :key="index">
        <el-collapse-item :name="index + 1">
          <template #title>
            <div class="font-size-14">{{ item.title }}</div>
          </template>
          <template #default>
            <div>{{ item.description }}</div>
          </template>

        </el-collapse-item>
      </template>
    </el-collapse>
  </div>

  <!-- 公告资讯新闻  -->
  <div :class="{'margin-top-10': windowWidth >= 768, 'margin-10': windowWidth < 768,}" class="bg-white border-radius-4 border-default-1">
    <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
      <template v-for="(item, index) in tabsList" :key="index">
        <el-tab-pane :name="item.name">
          <template #label>
            <span>{{ item.label }}</span>
          </template>
          <template #default>
            <el-row :gutter="10">
              <el-col v-for="val in item.list" :md="8" :sm="12" :xs="24" class="line-height-30">
                <el-link :underline="false" :href="val.path">{{ val.title }}</el-link>
              </el-col>
            </el-row>
          </template>
      </el-tab-pane>
      </template>
    </el-tabs>
  </div>


</template>

<style scoped>
.box-card {
  width: calc((var(--max-width) - var(--default-space) * 3) / 4);
  transition: color 0.3s ease;
}

.box-card:hover {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  transition: background-color 0.3s ease;
  position: relative;
  top: -5px;
}

.el-tabs__content > div {
  padding: 10px 20px;
  color: #6b778c;
  font-size: var(--el-font-size-base);
  height: 120px;
}

.el-tabs--left .el-tabs__content > div {
  height: fit-content;
  padding: 0;
}

.el-tabs--left .el-tabs__header > div {
  height: fit-content;
  padding: 0;
}

.el-tabs--left .el-tabs__item {
  padding: 0 10px 0 0;
}

.border-right-2 {
  border-right: 2px solid var(--el-border-style);
}

.el-collapse,
.el-collapse > .el-collapse-item:last-child > :deep(.el-collapse-item__header),
.el-collapse > .el-collapse-item:last-child > :deep(.el-collapse-item__wrap) {
  border: none;
}

.el-link {
  display: block;
}

@media (max-width: 768px) {
  .box-card {
    width: 95vw;
    margin: 0 2.5svw;
  }

  .el-tabs__content > div {
    padding: 0 20px;
    height: fit-content;
  }
}

</style>